<template>
    <div id="lateral">
        <v-toolbar dark tabs flat color="black">


            <!--<v-menu :nudge-width="100">-->
                <!--<v-toolbar-title >-->

                    <v-toolbar-side-icon ></v-toolbar-side-icon>
                    <!--<v-icon dark>arrow_drop_down</v-icon>-->
                <!--</v-toolbar-title>-->

                <!--<v-list>-->
                    <!--<v-list-tile-->
                            <!--v-for="item in items"-->
                            <!--:key="item"-->
                            <!--@click=""-->
                    <!--&gt;-->
                        <!--<v-list-tile-title v-text="item"></v-list-tile-title>-->
                    <!--</v-list-tile>-->
                <!--</v-list>-->
            <!--</v-menu>-->
            <v-toolbar-title>Shimmer Space</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon>
                <v-icon>search</v-icon>
            </v-btn>
            <!--<v-btn icon>-->
                <!--<v-icon>more_vert</v-icon>-->
            <!--</v-btn>-->
            <v-tabs
                    slot="extension"
                    v-model="tabs"
                    align-with-title
                    color="transparent"
                    slider-color="white"
            >
                <v-tab href="#one">添加订单</v-tab>
                <v-tab href="#two">未完成订单</v-tab>
                <v-tab href="#three">未完成订单</v-tab>
                <v-tabs-slider color="white"></v-tabs-slider>
            </v-tabs>
        </v-toolbar>
        <v-tabs-items v-model="tabs">
            <v-tab-item v-for="content in ['one', 'two', 'three']" :key="content" :id="content">
                <v-card height="200px" flat>
                </v-card>
            </v-tab-item>
        </v-tabs-items>
        <v-fab-transition>
            <v-btn
                    :color="activeFab.color"
                    :key="activeFab.icon"
                    v-model="fab"
                    dark
                    fab
                    fixed
                    bottom
                    left
            >
                <v-icon>{{ activeFab.icon }}</v-icon>
                <v-icon>close</v-icon>
            </v-btn>
        </v-fab-transition>
    </div>
</template>
<script>
  export default {
    data: () => ({
      fab: false,
      hidden: false,
      tabs: null,
      items: [
        'All', 'Family', 'Friends', 'Coworkers'
      ]
    }),

    computed: {
      activeFab () {
        switch (this.tabs) {
          case 'one':
            return {'color': 'indigo', icon: 'share'}
          case 'two':
            return {'color': 'red', icon: 'edit'}
          case 'three':
            return {'color': 'green', icon: 'keyboard_arrow_up'}
          default:
            return {}
        }
      },
    },
  }
</script>
<style>
    .v-toolbar__title{
        color: white;
    }
    /* This is for documentation purposes and will not be needed in your application */
    #lateral .v-speed-dial,
    #lateral .v-btn--floating {
        position: absolute;
    }

    #lateral .v-btn--floating {
        margin: 0 0 16px 16px;
    }
</style>